require(['./config'], () => {
    require(['template', 'swiper', 'header', 'footer'], (template,swiper) => {
      class Index {
        constructor () {
          this.index()
          this.moveTop()
        }

        index(){
          $.get('/libs/json/index.json', resp => {
            const dog = template('indexDog-li', {
              list: resp.slice(0,8)
            })
            $('#indexDog-ul').append(dog)

            const cat = template('indexCat-li', {
              list: resp.slice(8,16)
            })
            $('#indexCat-ul').append(cat)

            const good = template('indexGood-li', {
              list: resp.slice(16,24)
            })
            $('#indexGood-ul').append(good)

            const water = template('indexWater-li', {
              list: resp.slice(24,32)
            })
            $('#indexWater-ul').append(water)

            const pet = template('indexPet-li', {
              list: resp.slice(32,40)
            })
            $('#indexPet-ul').append(pet)
            
            const crawler = template('indexCrawler-li', {
              list: resp.slice(40,48)
            })
            $('#indexCrawler-ul').append(crawler)
            
            const bird = template('indexBird-li', {
              list: resp.slice(48,56)
            })
            $('#indexBird-ul').append(bird)
            
          })
        }

        moveTop(){
          $(window).scroll(function () {
            if ($(window).scrollTop() >= 50) {
                $('#main-top').fadeIn();
            }
            else {
                $('#main-top').fadeOut();
            }
          })
          $('#main-top').click(function(){
            $('html,body').animate({ scrollTop: 0 }, 500);
          })
          
        }
        
      }
      new Index()

      var mySwiper = new swiper ('.swiper-container', {
        loop: true, // 循环模式选项
        autoplay: {
          disableOnInteraction: false
        },
        effect : 'fade',

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      })
      mySwiper.el.onmouseover=function(){
        mySwiper.navigation.$nextEl.removeClass('hide');
        mySwiper.navigation.$prevEl.removeClass('hide');
      }
      mySwiper.el.onmouseout=function(){
        mySwiper.navigation.$nextEl.addClass('hide');
        mySwiper.navigation.$prevEl.addClass('hide');
      }

    })
})
